<template>
	<view v-if="configData.program == 1">
		<u-navbar title=" " :autoBack="true" bgColor="transparent" leftIconColor="#fff" fixed></u-navbar>
		<!-- <view class="flex-row align-center justify-center p-30" style="padding-top: 500rpx;">
			<scroll-view :style="'background: url(' + imgData.playing1 + ') no-repeat;background-size: 100% 100%;'"
				class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper"
				@scrolltolower="lower">
				<view class="scroll-view-item" v-for="(item,index) in 3">
					<view class="header" :style="'background: url(' + header1 + ') no-repeat;background-size: 100% 100%;'">
						玩法攻略
					</view>
				</view>
			</scroll-view>
		</view> -->
		<image :src="configData.playing" style="width: 100%;" mode="widthFix"></image>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				scrollTop: 0,
				upper: ""
			}
		},
		computed: {
			...mapState(["$userInfo", "isLogin", "systemInfo", "imgData"]),
		},
		onLoad() {
			if(this.configData.program == 0) {
				uni.redirectTo({
					url:'/pages/common/common?type=1'
				})
			}
		},
		methods: {
			lower() {},
			scroll(event) {
				//距离每个边界距离
				console.log(event.detail)
			},
			//滚动到底部/右边触发
			scrolltolower() {
				console.log(123213213213);
			},
			// 滚动到顶部/左边触发
			scrolltoupper() {
				console.log(2232332);
			}
		}
	}
</script>

<style>
	page {
		/* background: linear-gradient(180deg, #FEE9D4 0%, #FFFAF6 100%); */
		background: #360602;
	}

	.playing1 {
		width: 90%;
		height: 1000rpx;
		/* background-color: red; */

		border-radius: 10rpx;
	}

	.scroll-view {
		white-space: nowrap;
		height: 600px;
		width: 100%;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.scroll-view-item {
		height: 300px;
		width: 100%;
		background: linear-gradient(180deg, #EEDDAC 0%, #F5EBD3 100%);
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.header {
		width: 250rpx;
		height: 70rpx;
		background-color: #F8C68B;
		margin: auto;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;
	}
</style>